<!-- 经纪人详情 -->
<template>
  <div style="position: relative;padding-bottom: 210px;min-height: calc(100vh - 210px);">
    <heads></heads>
    <tools></tools>
    <div style="display: flex;width: 1200px;margin: auto;padding: 20px 0;">
      <!-- background-color: #00000033; -->
      <img style="width: 200px;height: 200px;object-fit: contain;cursor: pointer;border-radius:50%;" :src="agentInfo.image
          ? agentInfo.image
          : 'https://pic.bangbangtongcheng.com/static/my/header.png'
        " />
      <div class="minpian_center">
        <div class="minpian_center_one">
          <div style="display: flex; align-items: center">
            <div style="font-size: 32px; font-weight: 600">
              {{ agentInfo.name || "未命名用户" }}
            </div>
            <user-label :userInfo="agentInfo"> </user-label>

            <!-- <div class="jjr" v-if="agentInfo.isAgent == '1'">
              经纪人
            </div>
            <div class="jjr" v-else>个人用户</div> -->
          </div>

          <div v-if="!disa" style="
              display: flex;
              justify-content: space-between;
              cursor: pointer;
            ">
            <div style="
                display: flex;
                flex-direction: column;
                text-align: center;
                justify-items: center;
                align-items: center;
              " @click="collect(1)" v-if="isCollection == 0">
              <img style="width: 30px; height: 30px" src="../../assets/shou2.png" />
              <span style="font-size: 14px; color: #333">关注</span>
            </div>
            <div style="
                display: flex;
                flex-direction: column;
                align-items: center;
                cursor: pointer;
              " @click="collect(2)" v-else>
              <img style="width: 30px; height: 30px" src="../../assets/shou3.png" />
              <span style="font-size: 14px; color: #333">已关注</span>
            </div>
          </div>
        </div>
        <div class="minpian_center_one">
          <div style="
              font-size: 22px;
              font-weight: 400;
              display: flex;
              color: #aaaaaa;
            ">
            <span>为TA评分：</span>
            <el-rate v-model="agentInfo.scoreAvg" :disabled="disa" @change="rateChage"></el-rate>
          </div>
          <div @click="companyDetail(agentInfo)">
            <span>
              <!-- {{ disa ? "我" : "TA" }} -->
              TA的公司
            </span>
            <img style="width: 15px; height: 15px" src="../../assets/bbcz/tpxqy01.png" alt="" />
          </div>
        </div>
        <div class="minpian_center_one">
          <div style="display:flex;align-items: center;height:100%">
            <div class="vip-level pointer" :style="{
              backgroundColor:
                $store.state.colors[agentInfo.memberLevel - 1].bgColor,
              color: $store.state.colors[agentInfo.memberLevel - 1].wordColor,
              borderColor:
                $store.state.colors[agentInfo.memberLevel - 1].lineColor
            }">
              <!-- {{ agentInfo.userInfo.memberLevelTitle }} -->
              {{ $store.state.colors[agentInfo.memberLevel - 1].level }}
            </div>
          </div>
          <div class="wei" @click="weiguiClick(agentInfo)">
            <span>违规次数</span>
            <img style="width: 15px; height: 15px" src="../../assets/bbcz/tpxqy01.png" alt="" />
            <span style="color: red; font-weight: 600; font-size: 20px">{{
              agentInfo.violations || 0
            }}</span>
          </div>
        </div>
        <div class="contactWay">
          <div style="display: flex;">
            <div @click="chat(agentInfo)"
              style="cursor: pointer;display: flex;width: 130px;height: 50px;background-color: #64b6a8;border-radius: 10px;align-items: center;justify-content: center;">
              <img style="width: 33px;height: 33px;" src="../../assets/weixin_b.png" />
              <span style="color: #FFFFFF;">在线聊天</span>
            </div>
            <div
              style="cursor: pointer;margin-left: 20px;display: flex;height: 50px;padding: 0 15px;background-color: #64b6a824;color: #64b6a8;border-radius: 10px;align-items: center;justify-content: center;"
              @click="phoneCheck">
              <img style="width: 33px;height: 33px;" src="../../assets/dianhua_lan.png" />
              <span>{{
                phonestate ? agentInfo.userInfo.phone : "拨打电话"
              }}</span>
            </div>
          </div>
        </div>
      </div>

      <div style="display: none;width: 100px;justify-content: space-between;cursor: pointer;">
        <div style="display: flex;flex-direction: column;" @click="collect(1)" v-if="isCollection == 0">
          <img style="width: 30px;height: 30px;" src="../../assets/shou2.png" />
          <span style="font-size: 14px;color: #333;">关注</span>
        </div>
        <div style="display: flex;flex-direction: column;align-items: center;cursor: pointer;" @click="collect(2)" v-else>
          <img style="width: 30px;height: 30px;" src="../../assets/shou3.png" />
          <span style="font-size: 14px;color: #333;">已关注</span>
        </div>
        <!-- <div style="display: flex;flex-direction: column;cursor: pointer;" @click="jubaoClick">
					<img style="width: 30px;height: 30px;" src="../../assets/ju.png" />
					<span style="font-size: 14px;color: #333;">举报</span>
				</div> -->
      </div>
    </div>
    <div style="width: 1200px;margin: auto;">
      <div class="bottom">
        <div class="titLiat">
          <div @click="titClick(index)" :class="xuanzhong == index ? 'li cur' : 'li'" v-for="(item, index) in list"
            :key="index">
            <p>{{ item.name }}</p>
            <img v-if="index == xuanzhong" src="../../assets/xuanzhong.png" />
          </div>
        </div>
      </div>
      <div class="list">
        <template v-if="xuanzhong != 4">
          <div class="li" v-for="(item, index) in houseList" :key="index">
            <img class="biao" @click="details(item)" :src="item.displayDiagram ||
              item.display_diagram ||
              (item.houseImage && item.houseImage.split('|')[0]) ||
              (item.house_image && item.house_image.split('|')[0])
              " />
            <div class="name">
              <div class="t_1" @click="details(item)">
                <tag-view :item="item"></tag-view>{{ item.title }}
              </div>
              <div class="t_2">
                <span style="margin-right: 5px">{{ item.region }}</span>
                <span>{{ item.address }}</span>
              </div>
              <div class="t_3">
                <span style="margin-right: 16px">{{ item.house_type }}</span>
                <span style="margin-right: 16px">{{ item.AREA }}m²</span>
                <span>{{ item.foors }}</span>
              </div>
              <div class="t_4">
                <img style="border-radius: 31px;" :src="item.image
                    ? item.image
                    : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                  " />
                <span>{{ item.nikeName || "未命名用户" }}</span>
                <div style="cursor: pointer;" @click="shopdetails(item)">
                  {{ item.shop_name }}
                </div>
              </div>
            </div>
            <div class="qian" v-if="item.transaction_type == 2">
              <p class="p1">{{ item.price }}万</p>
              <p class="p2">
                {{ ((item.price * 10000) / item.AREA).toFixed(2) }}元/m²
              </p>
            </div>
            <div class="qian" v-else>
              <p class="p1">{{ item.price }}元/月</p>
            </div>
          </div>
          <el-empty v-if="houseList.length == 0" :description="xuanzhong == 0
              ? '暂无数据'
              : xuanzhong == 1
                ? '暂无二手房'
                : xuanzhong == 2
                  ? '暂无新房'
                  : xuanzhong == 3
                    ? '暂无出租房'
                    : ''
            ">
          </el-empty>
        </template>
        <template v-if="xuanzhong == 4">
          <div v-for="item in ceshiArr" :key="item.id">
            <friend-item :wrapWidth="1200" types="3" :item="item" noGutter @reData="getFriendCircle">
            </friend-item>
          </div>
          <el-empty v-if="ceshiArr.length == 0" description="暂无朋友圈">
          </el-empty>
        </template>
      </div>
      <div class="fenye">
        <el-pagination background layout="prev, pager, next" :total="housetotal" :page-size="housePage.pageSize"
          :current-change="housePage.pageNo" @current-change="currenthouse"></el-pagination>
      </div>
      <p class="mzsm" style="margin-top:-40px;margin-bottom:20px;">
        {{ disclaimerContent }}
      </p>
    </div>
    <report ref="report" :bUserId="agentInfo.id"></report>
    <chat ref="chats"></chat>
    <floor></floor>
    <inform ref="inform" :bUserId="bUserId" :businessType="businessType"></inform>
  </div>
</template>

<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import report from "../../components/report.vue";
import chat from "../../components/chat.vue";
import tools from "../../components/tools.vue";
import friendItem from "./comp/bbcz-friend-circle-item.vue";
import inform from "../index/inform";
export default {
  components: {
    floor,
    heads,
    report,
    chat,
    tools,
    friendItem,
    inform
  },
  data() {
    return {
      friendCircleList: [],
      agentInfo: {},
      disa: false,
      phonestate: false,
      list: [
        { num: 0, name: "全部" },
        { num: 1, name: "二手房" },
        { num: 2, name: "新房" },
        { num: 3, name: "出租房" },
        { num: 4, name: "帮友圈" }
      ],
      xuanzhong: 0,
      housePage: {
        pageSize: 10,
        pageNo: 1,
        userId: "",
        isLz: "0",
        examineStatus: "2",
        upStatus: "1"
      },
      houseList: [],
      housetotal: 0,
      loginstate: false,
      user: {},
      isCollection: 0,
      userInfo: {},
      id: "",
      ceshiArr: [],
      bUserId: "",
      businessType: ""
    };
  },
  created() {
    this.init(this.$route.query.id);
    this.getDisclaimers(6);
  },
  methods: {
    weiguiClick(user) {
      this.bUserId = user.id;
      this.businessType = user.businessType;
      setTimeout(() => {
        this.$refs.inform.getReportMyRecord();
      }, 100);
    },
    companyDetail(user) {
      this.goHouseShopDetails(user);
      // console.log(user);
    },
    init(id) {
      if (id) {
        this.id = id;
        this.getUserInfoByUserId(id);
        this.housePage.userId = id;
        this.getHouseInfo();
        this.getUser();
      }
    },
    getUserInfoByUserId(id) {
      this.$getHttp("/mob/user/getUserInfoByUserId", { id: id }).then(e => {
        if (e.code == 200) {
          let userinfo = e.userInfo;
          if (userinfo.isAgent == 1 || userinfo.isShop == 1) {
            userinfo.scoreAvg = e.scoreAvg;
          }

          // if (!userinfo.hasOwnProperty("userName")) {
          //   userinfo.name = userinfo.nikeName;
          // }else{
          // 	userinfo.name = userinfo.nikeName
          // }
          userinfo.name = userinfo.nikeName;
          this.agentInfo = userinfo;

          this.disa =
            userinfo.id == JSON.parse(localStorage.getItem("userInfo")).id;
        }
      });
    },
    getFriendCircle() {
      this.$getHttp(
        "/api/mobile/vehicleOwner/getHelpingFriendsCircleByPublisher",
        { pageSize: 10, pageNo: 1, publisherId: this.id, userId: this.user.id }
      ).then(res => {
        if (res.code == 200) {
          res.helpingFriendsCircleList.pageList.forEach(item => {
            item.chage = 0;
            item.picture = this.manageImg(item.picture);
            item.imageList = this.manageImg(item.picture);
            item.video = this.manageImg(item.video);
          });
          this.ceshiArr = res.helpingFriendsCircleList.pageList;
          this.housetotal = res.helpingFriendsCircleList.pageCount;
          console.log("ceshiArrceshiArrceshiArr", this.ceshiArr);
        }
      });
    },
    getHouseInfo() {
      this.$getHttp("/mob/home/getHouseInfo", this.housePage).then(data => {
        if (data.code == 200) {
          data.list.forEach(e => {
            //判断该对象是否存在该属性
            // if('FLOOR' in e){
            // 	e.foors = this.floor(e.FLOOR)
            // }
            if (e.hasOwnProperty("FLOOR")) {
              if (e.FLOOR.indexOf("|") == -1) {
                e.foors = "";
              } else {
                e.foors =
                  e.FLOOR.split("|")[0] +
                  "层/" +
                  "共" +
                  e.FLOOR.split("|")[1] +
                  "层";
              }
            }
            if (!e.hasOwnProperty("shop_name")) {
              e.shop_name = "个人房源";
            }
          });
          this.houseList = data.list;
          this.housetotal = data.count;
        }
      });
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
        this.user = user;
        this.$getHttp("/mob/user/getIsCollection", {
          userId: user.id,
          cbType: 3,
          type: 1,
          relationId: this.$route.query.id
        }).then(data => {
          if (data.code == 200) {
            this.isCollection = data.isCollection;
          }
        });
        this.$postHttp("/mob/user/saveUserCollection", {
          userId: user.id,
          type: 2,
          cbType: 3,
          relationId: this.$route.query.id
        }).then(data => { });
      } else {
        this.loginstate = false;
      }
    },
    rateChage(e) {
      if (this.loginstate) {
        // this.disa = true;
        this.$postHttp("/mob/user/saveScoreInfo", {
          agentId: this.agentInfo.id,
          userId: this.user.id,
          score: e
        }).then(data => {
          if (data.code == 200) {
            this.$message({
              message: "评分成功！",
              type: "success",
              offset: 120,
              duration: 2000
            });
            this.getUserInfoByUserId(this.$route.query.id);
          }
        });
      } else {
        this.$message({
          message: "请登录之后在进行评分",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    addIntegral(val, title) {
      this.$postHttp("/mob/iteration/addIntegral", {
        userId: JSON.parse(localStorage.getItem("userInfo")).id,
        ruleNumber: val,
        title: title
      }).then(res => { });
    },
    collect(type) {
      if (this.loginstate) {
        if (type == 1) {
          this.$postHttp("/mob/user/saveUserCollection", {
            userId: this.user.id,
            type: 1,
            cbType: 3,
            relationId: this.agentInfo.id
          }).then(data => {
            if (data.code == 200) {
              this.isCollection = 1;
              this.$message({
                message: "关注成功！",
                type: "success",
                offset: 120,
                duration: 2000
              });
              this.addIntegral(5, "关注用户");
            }
          });
        } else {
          this.$postHttp("/mob/user/saveUserCollection", {
            userId: this.user.id,
            type: 1,
            cbType: 3,
            relationId: this.agentInfo.id,
            cancel: 1
          }).then(data => {
            if (data.code == 200) {
              this.isCollection = 0;
              this.$message({
                message: "取消关注成功！",
                type: "success",
                offset: 120,
                duration: 2000
              });
            }
          });
        }
      } else {
        this.$message({
          message: "请登录之后在关注！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    jubaoClick() {
      this.$refs.report.jubaoGuan();
    },
    floor(a) {
      var fool = a.split(",");
      if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层";
      if (fool[0] == 2)
        return fool[1] + "层-" + fool[2] + "层/共" + fool[3] + "层";
      if (fool[0] == 3) return "独栋/共" + fool[1] + "层";
    },
    details(item) {
      if (item.transaction_type == 1) {
        this.$router.push({
          path: "/index/leaseDetails",
          query: {
            id: item.id
          }
        });
      } else {
        this.$router.push({
          path: "/index/newHouseDetails",
          query: {
            id: item.id
          }
        });
      }
    },
    shopdetails(item) {
      if (item.shop_name == "个人房源") {
        this.$message({
          message: "个人房源！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      } else {
        const routeLink = this.$router.resolve({
          path: "/index/ShopDetails?id=" + item.shop_id
        });
        window.open(routeLink.href, "_blank");
        // this.$router.push({
        //   path: "/index/ShopDetails",
        //   query: {
        //     id: item.id
        //   }
        // });
      }
    },
    //开启聊天
    chat() {
      if (this.loginstate) {
        if (this.disa) {
          return;
        }
        this.$refs.chats.chatOpne(this.agentInfo.id);
      } else {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    phoneCheck() {
      if (this.loginstate) {
        if (this.disa) return;
        // agentInfo.phone
        this.phonestate = true;
        this.$postHttp("/mob/user/call", {
          userId: JSON.parse(localStorage.getItem("userInfo")).id,
          telephoneNumber: this.agentInfo.phone,
          associationId: this.agentInfo.id,
          type: "3"
        }).then(res => { });
      } else {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    currenthouse(e) {
      this.scrollToElement(document.querySelector(".bottom"));
      this.housePage.pageNo = e;
      this.getHouseInfo();
    },
    titClick(index) {
      this.xuanzhong = index;
      switch (index) {
        case 0:
          delete this.housePage.transactionType;
          delete this.housePage.newOld;
          this.housePage.pageNo = 1;
          this.getHouseInfo();
          break;
        case 1:
          this.housePage.transactionType = 2;
          this.housePage.newOld = 2;
          this.housePage.pageNo = 1;
          this.getHouseInfo();
          break;
        case 2:
          this.housePage.transactionType = 2;
          this.housePage.newOld = 1;
          this.housePage.pageNo = 1;
          this.getHouseInfo();
          break;
        case 3:
          delete this.housePage.newOld;
          this.housePage.transactionType = 1;
          this.housePage.pageNo = 1;
          this.getHouseInfo();
          break;
        case 4:
          this.getFriendCircle();
          break;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.bottom {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #333333;
  margin-top: 0px;

  .titLiat {
    width: 1200px;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 40px;
    margin-bottom: 15px;

    .li {
      display: inline-block;
      vertical-align: top;
      margin-right: 40px;
      color: #333;
      cursor: pointer;

      p {
        font-size: 26px;
      }

      img {
        width: 32px;
        height: 16px;
        margin-left: 50%;
        transform: translateX(-50%);
        margin-top: -8px;
      }
    }

    .cur {
      color: #64b6a8;
      border: 0;
      transform: scale(1.1);
    }
  }

  .tit {
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 24px;
  }

  .list {
    width: 100%;

    .li {
      position: relative;
      padding-bottom: 24px;
      margin-bottom: 24px;
      border-bottom: 1px solid #e0e0e0;

      .biao {
        width: 300px;
        height: 200px;
      }

      .name {
        display: inline-block;
        vertical-align: top;
        margin-left: 24px;
        position: relative;
        height: 200px;
        width: 700px;

        .t_1 {
          color: #333;
          font-size: 26px;
          cursor: pointer;
        }

        .t_2 {
          font-size: 18px;
          color: #666666;
          margin-top: 12px;
        }

        .t_3 {
          font-size: 18px;
          color: #666666;
          margin-top: 12px;
        }

        .t_4 {
          position: absolute;
          font-size: 18px;
          color: #666666;
          bottom: 0;
          left: 0;
          white-space: nowrap;

          img {
            width: 31px;
            height: 31px;
          }

          div {
            display: inline-block;
            // width: 90px;
            height: 30px;
            background: #ffffff;
            border: 1px solid #64b6a8;
            border-radius: 4px;
            text-align: center;
            line-height: 30px;
            margin-left: 24px;
            color: #64b6a8;
          }
        }
      }

      .qian {
        position: absolute;
        top: 62px;
        right: 0;

        .p1 {
          //width: 120px;
          font-size: 32px;
          color: #e00000;
          text-align: center;
        }

        .p2 {
          //width: 120px;
          font-size: 18px;
          color: #333333;
          text-align: center;
        }
      }
    }
  }
}

.list {
  width: 1200px;
  margin: auto;

  .li {
    position: relative;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e0e0e0;

    .biao {
      width: 300px;
      height: 200px;
      object-fit: contain;
      cursor: pointer;
    }

    .name {
      display: inline-block;
      vertical-align: top;
      margin-left: 24px;
      position: relative;
      height: 200px;
      width: 700px;

      .t_1 {
        color: #333;
        font-size: 26px;
        cursor: pointer;
      }

      .t_2 {
        font-size: 18px;
        color: #666666;
        margin-top: 12px;
      }

      .t_3 {
        font-size: 18px;
        color: #666666;
        margin-top: 12px;
      }

      .t_4 {
        position: absolute;
        font-size: 18px;
        color: #666666;
        bottom: 0;
        left: 0;
        white-space: nowrap;

        img {
          width: 31px;
          height: 31px;
        }

        div {
          display: inline-block;
          /* width: 90px; */
          height: 30px;
          background: #ffffff;
          border: 1px solid #64b6a8;
          border-radius: 4px;
          text-align: center;
          line-height: 30px;
          margin-left: 24px;
          color: #64b6a8;
        }
      }
    }

    .qian {
      position: absolute;
      top: 62px;
      right: 0;

      .p1 {
        //width: 120px;
        font-size: 32px;
        color: #e00000;
        text-align: center;
      }

      .p2 {
        //width: 120px;
        font-size: 18px;
        color: #333333;
        text-align: center;
      }
    }
  }
}

.fenye {
  width: 100%;
  height: 50px;
  text-align: center;
  margin: 60px 0px;

  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }
}

/deep/.el-rate__icon {
  font-size: 30px;
}

.vip-level {
  width: 80px;
  text-align: center;
  padding: 4px 0;
  border: 1px solid;
  border-radius: 4px 4px 4px 4px;
}

.minpian_center {
  padding-left: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .minpian_center_one {
    cursor: pointer;
    display: flex;
    color: #333;
    justify-content: space-between;
    align-items: center;

    .jjr {
      width: 58px;
      height: 22px;
      border-radius: 14px;
      border: 1px solid #64b6a8;
      font-size: 12px;
      font-weight: 400;
      color: #64b6a8;
      text-align: center;
      line-height: 22px;
      margin-left: 15px;
    }

    .wei {
      display: flex;
      align-items: center;
    }
  }

  .contactWay {
    display: flex;
    align-items: center;

    .lxfs-item {
      position: relative;
      color: #333333;

      .lxfs-item-phone {
        position: absolute;
        bottom: o;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    img {
      width: 33px;
      height: 33px;
    }
  }
}
</style>
